<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医学文献智能检索与摘要平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        #app {
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .search-section {
            padding: 40px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .search-box {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .search-input {
            flex: 1;
            padding: 15px 20px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .search-btn {
            padding: 15px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        
        .search-btn:active {
            transform: translateY(0);
        }
        
        .search-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #667eea;
            font-size: 18px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .summary-section {
            padding: 40px;
            background: #f8f9ff;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .summary-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }
        
        .summary-content {
            font-size: 1.1em;
            line-height: 1.8;
            color: #555;
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .results-section {
            padding: 40px;
        }
        
        .results-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }
        
        .paper-card {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        
        .paper-card:hover {
            border-color: #667eea;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
            transform: translateY(-5px);
        }
        
        .paper-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 15px;
        }
        
        .paper-title {
            font-size: 1.3em;
            color: #333;
            font-weight: bold;
            flex: 1;
            margin-right: 20px;
        }
        
        .paper-score {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 0.9em;
        }
        
        .paper-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            color: #666;
            font-size: 0.95em;
        }
        
        .paper-abstract {
            color: #555;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .paper-link {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .paper-link:hover {
            background: #764ba2;
            transform: translateX(5px);
        }
        
        .error {
            background: #fee;
            color: #c33;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border: 2px solid #fcc;
        }
        
        .empty {
            text-align: center;
            padding: 60px 20px;
            color: #999;
            font-size: 1.2em;
        }
        
        .empty-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1>🏥 医学文献智能检索与摘要平台</h1>
                <p>基于大模型的医学文献检索和自动摘要系统 | 快速定位最新研究成果</p>
            </div>
            
            <div class="search-section">
                <div class="search-box">
                    <input 
                        type="text" 
                        class="search-input" 
                        v-model="searchQuery"
                        @keyup.enter="search"
                        placeholder="输入您要检索的医学主题，例如：COVID-19 treatment, diabetes medication, cancer immunotherapy..."
                    >
                    <button class="search-btn" @click="search" :disabled="loading">
                        {{ loading ? '搜索中...' : '🔍 搜索' }}
                    </button>
                </div>
            </div>
            
            <div v-if="loading" class="loading">
                <div class="spinner"></div>
                <p>正在搜索相关医学文献，请稍候...</p>
            </div>
            
            <div v-if="error" class="error">
                <strong>错误：</strong> {{ error }}
            </div>
            
            <div v-if="summary" class="summary-section">
                <h2 class="summary-title">📋 智能摘要</h2>
                <div class="summary-content">{{ summary }}</div>
            </div>
            
            <div v-if="papers.length > 0" class="results-section">
                <h2 class="results-title">📚 检索结果 ({{ papers.length }} 篇论文)</h2>
                
                <div v-for="paper in papers" :key="paper.pmid" class="paper-card">
                    <div class="paper-header">
                        <div class="paper-title">{{ paper.title }}</div>
                        <div class="paper-score">相关性: {{ (paper.relevance_score * 100).toFixed(1) }}%</div>
                    </div>
                    
                    <div class="paper-meta">
                        <span><strong>作者：</strong>{{ paper.authors.join(', ') || '未知' }}</span>
                        <span><strong>期刊：</strong>{{ paper.journal || '未知' }}</span>
                        <span><strong>日期：</strong>{{ paper.publication_date || '未知' }}</span>
                    </div>
                    
                    <div class="paper-abstract">
                        <strong>摘要：</strong>{{ paper.abstract || '无摘要' }}
                    </div>
                    
                    <a :href="paper.full_text_url" target="_blank" class="paper-link">
                        🔗 查看完整论文
                    </a>
                </div>
            </div>
            
            <div v-if="!loading && !error && papers.length === 0 && searchQuery" class="empty">
                <div class="empty-icon">🔍</div>
                <p>未找到相关论文，请尝试其他关键词</p>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    searchQuery: '',
                    loading: false,
                    error: null,
                    papers: [],
                    summary: ''
                };
            },
            methods: {
                async search() {
                    if (!this.searchQuery.trim()) {
                        this.error = '请输入搜索关键词';
                        return;
                    }
                    
                    this.loading = true;
                    this.error = null;
                    this.papers = [];
                    this.summary = '';
                    
                    try {
                        const response = await axios.post('http://localhost:8000/search', {
                            query: this.searchQuery,
                            top_k: 10
                        });
                        
                        this.papers = response.data.papers;
                        this.summary = response.data.summary;
                    } catch (error) {
                        console.error('Search error:', error);
                        this.error = error.response?.data?.detail || '搜索失败，请检查网络连接或联系管理员';
                    } finally {
                        this.loading = false;
                    }
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
